import classNames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';

export interface ITagProps {
  onClick?: () => void;
  onClose?: () => void;
  children: React.ReactNode;
  className?: string;
  style?: React.CSSProperties;
  title?: string;
}

const propTypes = {
  onClick: PropTypes.func,
  onClose: PropTypes.func,
  children: PropTypes.node.isRequired,
  className: PropTypes.string,
  title: PropTypes.string,
};

export const Tag: React.SFC<ITagProps> = (props: ITagProps) => {
  const handleClose = (event: React.MouseEvent) => {
    if (props.onClose) {
      event.stopPropagation();
      props.onClose();
    }
  };
  return (
    <span title={props.title} className={classNames('br-tag', props.className)} style={props.style}>
      <span onClick={props.onClick}>{props.children}</span>
      <i onClick={handleClose} className="icon icon-close-thin"></i>
    </span>
  );
};

Tag.propTypes = propTypes;
